<<<<<<< HEAD
import React from "react"
// import { observable } from "mobx-react";
import { observer,inject } from "mobx-react"
@inject('searchStore')

@observer
class SeachHot extends React.Component{
    constructor(){
        super()
        this.state={
            value:"",
            arr:[],
            history:localStorage.getItem('search_history') ? localStorage.getItem('search_history').split(',') : []
            // history2: localStorage.getItem('seachHistory') ? localStorage.getItem('seachHistory').split(',') : []
        }
        this.clearHistory = this.clearHistory.bind(this);
        // this.clearAll = this.clearAll.bind(this);
    }
    componentDidMount(){
        const {searchStore}=this.props;
        searchStore.getresultList2();
        // let locallist=JSON.parse(localStorage.getItem("seachHistory"));
        // var newArr = [];
        // var obj={};
        // //比较数组内的属性，并将其添加为obj的对象
        // for (var i = 0, length = locallist.length; i < length; i++) {
        // if(!obj[locallist[i].value]){
        // newArr.push(locallist[i])
        // obj[locallist[i].value]=-1
        // }
        // }
        // this.lists=newArr;
        // const add=this.lists
        // console.log(newArr)
        // this.setState({add})
    }
    clearHistory(text) {
        const historyArr = localStorage.getItem('search_history').split(',');
        const index = historyArr.indexOf(text);
        historyArr.splice(index, 1);
        localStorage.setItem('search_history', historyArr);
        this.setState({history: historyArr});
    }
    clearAll() {
        localStorage.setItem('search_history', '');
        this.setState({history: []});
    }
    seacher(val,id){
        // console.log(val)
        // const val2=this.props.searchStore.singers[0].name
        // for(let i=0; i<val2.length;i++){
        //     val2[i].onClick=()=>{
        //         return 
        //     }
        // }
        this.props.history.push({pathname: '/search/singerResult', state: {id: id,searchValue:val}});
        this.setHistory(val)
    }
    setHistory(data) {
        this.setState({history: this.state.history.push(data)});
        const searchHistory = this.state.history;
        let newHistory = [];
        for (let i = 0; i < searchHistory.length; i++) {
            if (newHistory.indexOf(searchHistory[i]) === -1) {
                newHistory.push(searchHistory[i])
            }
        }
        // console.log(newHistory)
        localStorage.setItem('search_history', newHistory);
    }
    seacherHistory(ele){
        this.props.history.push({pathname: '/search/result', state: {searchValue: ele}});
    }
    render(){
        const {seachsingers}=this.props.searchStore
        // console.log(this.props.searchStore.singers[0].name)
        return(
            
            <div>
                 <div className="gt">
                   <p className="seach-p">热门搜索</p>
                   
                  {
                    seachsingers.map(({name,id})=>{
                          return(
                              <span className="as" onClick={this.seacher.bind(this,name,id)} >{name}</span>
                          )
                      })

                  }
               </div>
               <div className="searchTitle">
                 <span className="seach-pp">搜索历史</span>
                    <em className="em" onClick={this.clearAll.bind(this)}>清除历史</em>
                </div>
                <div>
                    {
                        // console.log(this.lists)
                        // (this.lists || []).map(({value})=>{
                        //     return(
                        //        <div className="p">
                        //             <span className="we">{value}</span>
                        //             <em onClick={this.clearHistory.bind(this)}>&times;</em>
                        //        </div>
                        //     )
                        // })

                        this.state.history.length > 0 ? this.state.history.map((ele) => {
                            return (
                                <div className="p">
                                    <div className="div2">
                                    <span className="time"></span>
                                    <span className="we"  onClick={this.seacherHistory.bind(this,ele)}>{ele}</span>
                                    </div>
                                    <em onClick={() => this.clearHistory(ele)}>&times;</em>
                                </div>
                            )
                        }) : null
                    }
                </div>
            </div>
        )
    }
}

=======
import React from "react"
// import { observable } from "mobx-react";
import { observer,inject } from "mobx-react"
@inject('searchStore')

@observer
class SeachHot extends React.Component{
    constructor(){
        super()
        this.state={
            value:"",
            arr:[],
            history:localStorage.getItem('search_history') ? localStorage.getItem('search_history').split(',') : []
            // history2: localStorage.getItem('seachHistory') ? localStorage.getItem('seachHistory').split(',') : []
        }
        this.clearHistory = this.clearHistory.bind(this);
        // this.clearAll = this.clearAll.bind(this);
    }
    componentDidMount(){
        const {searchStore}=this.props;
        searchStore.getresultList2();
        // let locallist=JSON.parse(localStorage.getItem("seachHistory"));
        // var newArr = [];
        // var obj={};
        // //比较数组内的属性，并将其添加为obj的对象
        // for (var i = 0, length = locallist.length; i < length; i++) {
        // if(!obj[locallist[i].value]){
        // newArr.push(locallist[i])
        // obj[locallist[i].value]=-1
        // }
        // }
        // this.lists=newArr;
        // const add=this.lists
        // console.log(newArr)
        // this.setState({add})
    }
    clearHistory(text) {
        const historyArr = localStorage.getItem('search_history').split(',');
        const index = historyArr.indexOf(text);
        historyArr.splice(index, 1);
        localStorage.setItem('search_history', historyArr);
        this.setState({history: historyArr});
    }
    clearAll() {
        localStorage.setItem('search_history', '');
        this.setState({history: []});
    }
    seacher(val,id){
        // console.log(val)
        // const val2=this.props.searchStore.singers[0].name
        // for(let i=0; i<val2.length;i++){
        //     val2[i].onClick=()=>{
        //         return 
        //     }
        // }
        this.props.history.push({pathname: '/search/singerResult', state: {id: id,searchValue:val}});
        this.setHistory(val)
    }
    setHistory(data) {
        this.setState({history: this.state.history.push(data)});
        const searchHistory = this.state.history;
        let newHistory = [];
        for (let i = 0; i < searchHistory.length; i++) {
            if (newHistory.indexOf(searchHistory[i]) === -1) {
                newHistory.push(searchHistory[i])
            }
        }
        // console.log(newHistory)
        localStorage.setItem('search_history', newHistory);
    }
    seacherHistory(ele){
        this.props.history.push({pathname: '/search/result', state: {searchValue: ele}});
    }
    render(){
        const {seachsingers}=this.props.searchStore
        // console.log(this.props.searchStore.singers[0].name)
        return(
            
            <div>
                 <div className="gt">
                   <p className="seach-p">热门搜索</p>
                   
                  {
                    seachsingers.map(({name,id})=>{
                          return(
                              <span className="as" onClick={this.seacher.bind(this,name,id)} >{name}</span>
                          )
                      })

                  }
               </div>
               <div className="searchTitle">
                 <span className="seach-pp">搜索历史</span>
                    <em className="em" onClick={this.clearAll.bind(this)}>清除历史</em>
                </div>
                <div>
                    {
                        // console.log(this.lists)
                        // (this.lists || []).map(({value})=>{
                        //     return(
                        //        <div className="p">
                        //             <span className="we">{value}</span>
                        //             <em onClick={this.clearHistory.bind(this)}>&times;</em>
                        //        </div>
                        //     )
                        // })

                        this.state.history.length > 0 ? this.state.history.map((ele) => {
                            return (
                                <div className="p">
                                    <div className="div2">
                                    <span className="time"></span>
                                    <span className="we"  onClick={this.seacherHistory.bind(this,ele)}>{ele}</span>
                                    </div>
                                    <em onClick={() => this.clearHistory(ele)}>&times;</em>
                                </div>
                            )
                        }) : null
                    }
                </div>
            </div>
        )
    }
}

>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
export default SeachHot